<template>
	<div class="login">
		<component
			:is="steps[currentStep]"
			@nextStep="nextStep"
			@close="$emit('close')"
		/>
	</div>
</template>

<script>
import LoginNumber from './Login-number'
import LoginAge from './Login-age'
import LoginInterest from './Login-interest'
import LoginRole from './Login-role'
import LoginSex from './Login-sex'
import LoginToy from './Login-toy'

export default {
  components: {
    LoginNumber,
    LoginAge,
    LoginInterest,
    LoginRole,
    LoginSex,
    LoginToy,
  },
  data() {
    return {
      currentStep: 0,
    }
  },
  computed: {
    steps() {
      const user = this.$storeGet('getMyInfo')

      /* 没有用户情况下，展示账号输入 */
      if (!user) {
        return ['LoginNumber']
      }

      const steps = ['LoginNumber', 'LoginRole']

      if (user.role === 'parent') { // 父母不需要继续选择
        return steps
      }

      return steps.concat(['LoginAge', 'LoginSex', 'LoginToy', 'LoginInterest'])
    }
  },
  methods: {
    /**
     * @param {Object} user 用户的某些信息
     */
    nextStep(user) {
      if (user) {
        this.$storeCommit('setUserInfo', user)
      }
      console.log(user)
      if (this.currentStep === this.steps.length - 1) {
        this.$pushTo('Home')
        console.log('去首页')
      } else {
        this.currentStep++
        console.log(this.steps, this.currentStep)
      }
    }
  }
}
</script>

<style lang='scss'>
.login {
  width: 500px;

  .input {
    width: 440px;
    text-align: center;

    input {
      width: 340px;
    }
  }

  .forget {
    margin-top: 13px;
    margin-right: 50px;
    font-size: 16px;
    color: $color1;
    text-align: right;
    cursor: pointer;
  }
}
</style>
